<!--  -->
<template>
  <div class="">
    <h1>1.首页----{{ $store.state.name }}</h1>
    <h1>2.$store.state.user.name----{{ $store.state.user.name }}</h1>
    3.集合<h1 v-for="(u,index) in $store.state.UserList" :key="index">
      {{ u.name }}--{{ u.age }}
    </h1>

    <button @click="updata">修改用户名</button>
    <button @click="updateUser">修改user</button>
    <button @click="addUser">添加用户到集合</button>
    <span>学生年龄总和:{{ $store.getters.getAllAges }}</span>
    

  </div>
</template>

<script>
import store from '@/store';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //方法集合
  methods: {
    updata() {
      this.$store.commit("updateName", "cc");
    },
    updateUser() {
      this.$store.commit("updateUser", 
        { name: "aa", age: 18 }
      );
    },
    addUser(){
      this.$store.commit("addUser", 
        { name: "cc", age: 18 }
      );
    },
 
  },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
</style>
